import { useIntersectionObserver } from '@vueuse/core';
// App 是在vue库中定义好的类型
import defaultImg from "../assets/images/200.png";
import { App } from 'vue'
export default {
  install (app: App) {
    //全局指令
  app.directive('lazy',{
    //mounted是v3中自定义指令生命周期,它会呗自动调用
    //它表示含义和组件mounted是一致
    //el 是dom元素, blnding
    mounted(el,binding){
      //设置默认图
      el.src = defaultImg
      //实时监听el是否可见,如果可见,给他src设置binding.value
      const { stop } = useIntersectionObserver(el,([{ isIntersecting }])=>{
        if(isIntersecting){
          el.src = binding.value

          //停止
          stop()
        }
      })
    }
  })
  }
}
